<style>
.content{
	width: 650px;
	overflow: hidden;
	display: inline-block !important;
}
.list-baithi{
	padding: 0px;
	margin: 0px;
	overflow-y: scroll;
	height: 3000px; 
	width: 700px;
}
.list-baithi li{
	width: 200px;
	height: 330px;
	float: left;
	margin: 10px 7px;
	position: relative;
	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.list-baithi li img{
	width: 100%;
	padding: 0px !important;
	margin: 0px !important;
}
.list-baithi li .info{
	position: absolute;
	bottom: 0px;
	
}
.list-baithi li p.numvote{
	width: 179px;
	height: 25px;
	background: #000;
	color: #fbe848;
	padding: 5px 0px 5px 6px;
	font-weight: 700;
	font-family: Georgia;
	float: left;
}
.list-baithi li .logo{
	width: 15px;
	height: 35px !important;
	float: left;
}
.list-baithi li .ex-info{
	background: #292929;
	opacity: 0.7;
	color: #fff;
	padding: 5px 3px;
	display: none;
	bottom: -10px;
}
.list-baithi .ex-info h3{
	color: #e9ba00;
	font-weight: 700;
	font-family: Georgia;
}
.list-baithi li .hoten{
	background: #292929;
	opacity: 0.7;
	color: #fff;
	padding: 5px 5px;
	font-weight: 700;
	font-family: Georgia;
	border-bottom: 1px solid #fff;
}
.cuphap{
	border: 2px dashed #3a3a39;
	border-radius: 5px;
	text-align: center;
	padding: 20px 10px;
	margin: -20px 10px 20px;
	width:610px;
	display: inline-block; 
}
</style>
<div class="cuphap">
			Để bình chọn cho nhà tạo mẫu bạn yêu thích<br>
			Soạn Tin: <b><font color="#d20101">KeoVang &nbsp;&nbsp;&lt;MSBC&gt;</font></b> Gửi <b>6335</b><br><font color=#000 size=-1><i>(<font color="#d20101">KeoVang<font color=#000 size=-1><i>&lt;dấu cách&gt;</i></font>Mã số bình chọn</font></b> Gửi <b>6335</b>)</i></font><br>
			<font size=-1>Trang thông tin điện tử <b>www.tocvasao.net</b> hân hạnh thực hiện chương trình này.</font>
		</div>
<?
	$q=query("select * from baithi order by code asc");
	echo "<ul class='list-baithi'>";
	$i=0;
	while ($r=fetch($q)) {
		# code...
		$li= "<li class='li$i'>
		<a href='./oscar-for-hair/".xoadau($r["hoten"])."-MS-$r[code].html'>
			<img src='$r[image]'>
			<div class=info>
				<div class=hoten>$r[hoten]</div>
				<div class=ex-info><b>Hạng mục đề cử:</b><h3>$r[giai]</h3><br>$r[info]</div>
				<img src='./images/logo-oscar.jpg' class='logo'>
		<p class=numvote>Mã Số Bình Chọn: $r[code]<br>Lượt Bình Chọn: <font color='#fff'>".($r['vote']+$r['vote1'])."</font></p>
				
			</div>
		</a>
		</li>";
		echo $li;
		$li=str_replace("<li class='$i'>", "<li style='display:none;' class='li$i'>", $li);
		$li=str_replace("\r", "", $li);
		$listli.='"'.str_replace("\n", "", $li).'",
		';
		$i++;
		
	}
	$listli.='""';
	echo "</ul>";
?>
<script type="text/javascript">
var listLi=[<?=$listli;?>];
var i=0;
var k=true;
	$(".list-baithi li").hover(function(){
		$(this).find(".ex-info").slideDown();
	},function(){
		$(this).find(".ex-info").slideUp();
	});
	$(".list-baithi").scroll(function(){
		var scrollTop= $(this)[0].scrollTop;
		var scrollHeight = $(this)[0].scrollHeight;
		var divHeight =$(this).height();
		if(scrollHeight - (scrollTop + divHeight) <= 300)
		{
			if(k){
				k=false;
				$(".list-baithi").append(listLi[i]);
				$(".list-baithi").append(listLi[i+1]);
				$(".list-baithi").append(listLi[i+2]);
				$(".list-baithi li").fadeIn();
				i=(i+3) % listLi.length;
				k=true;
			}
		}
		
	});
</script>